fix: Fixed scrollbar in example output frame (cherry-pick from #745) - #1431
Conversation
|
@Nwakaego-Ego Since this component is used often, can you double check this change on some of the other pages? |
Hi @doradocodes, I checked the following locally examples/animation-and-variables-mobile-device-movement/ scrollbar is still present Only the Mobile Device Movement example has a scrollbar. All other examples display without scrollbars. |
|
@Nwakaego-Ego Looks good, let's also cherry-pick this fix into |
3 participants
Fixes #716
This is a clean cherry-pick of the relevant fix from #745 by @Its-sunny69 whose branch had carried over unrelated commits.
The fix removes the hardcoded width and height from the iframe in src/components/CodeEmbed/frame.tsx and lets it fill its parent container instead. Before this change, both the parent and the iframe were declaring the same size separately. Now, only the parent controls the size, which removes the confusion that was likely causing Chrome to show unnecessary scrollbars at certain zoom levels.
Note: I could not reproduce the bug locally or on the live site. I also found that index.jsx line 94 already has overflow-hidden on the parent container, which may explain why the bug is hard to reproduce consistently. The fix is still worth merging as it makes the code cleaner.